<template>
    <div class="input-group input-group-sm my-3 mx-auto">
        <input type="text" @keyup.enter="onSearch" class="form-control" placeholder="请输入关键字" v-model="info">

        <div class="input-group-append">
            <button class="btn btn-outline-primary" type="button" @click="onSearch">搜索</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SearchBar",
        data: () => ({
            info: "",
        }),
        methods: {
            onSearch() {
                this.$bus.$emit('click', this.info)
            }
        }
    }
</script>

<style scoped>
    div.input-group{
        width: 200px;
    }
    div.input-group input.form-control{
        transition: all .5s ease;
    }
    div.input-group input.form-control:focus{
        margin-left: -50px;
    }
</style>
